<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>可视化-数据中心</title>
    <link href="/css/css/index.css" rel="stylesheet">
    <link href="/css/css/reset.css" rel="stylesheet">
    <script src="js/echarts.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div class="main" id="particles-js">
    <div class="main_con">
        <div class="main_top">
            <div class="main_top_left">
                <div class="combined-data-module">
                    <img src="images/main_top_left.png"/>
                    <div class="combined-data-title">公开数据展示</div>
                    <div class="combined-data-content">
                        <div class="date-time-container">
                            <div class="date-section">
                                <div class="date-label"></div>
                                <div class="date-value" id="currentDate"></div>
                            </div>
                            <div class="day-section">
                                <div class="day-label"></div>
                                <div class="day-value" id="currentDay"></div>
                            </div>
                            <div class="time-section">
                                <div class="time-label"></div>
                                <div class="time-value" id="currentTime"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main_top_middle">
                <div class="main_top_middle_top_title">
                    <img class="title_bg" src="/images/title_bg.png">
                    大数据可视化平台
                    <a class="title_web" onclick="bbb()" target="blank">进入后台</a>
                    <a class="title_admin" onclick="aaa()" target="blank">返回主页</a>
                </div>

                <div class="main_top_middle_bottom">
                    <div class="main_top_middle_bottom_echarts">
                        <img src="/images/main_bootm_middle.png">
                        <div class="main_top_echarts_con">
                            <div class="main_top_echarts_con_title">销量排行</div>
                            <div class="right-center">
                                <div class="title">
                                </div>
                                <div class="echart wenzi">
                                    <div class="gun">
                                        <span>排行</span>
                                        <span>品牌名</span>
                                        <span>颜色</span>
                                        <span>销量</span>
                                    </div>
                                    <div class="myscroll">
                                        <ul>
                                            <li :key="index" v-for="(item, index) in rankings">
                                                <div class="fontInner clearfix">
                                                    <span><b>{{ index + 1 }}</b></span> <!-- 排行 -->
                                                    <span>{{ item.cname }}</span> <!-- 品牌名 -->
                                                    <span>{{ item.color }}</span> <!-- 颜色 -->
                                                    <span>{{ item.quantity }}</span> <!-- 销量 -->
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="main_top_middle_bottom_echarts main_top_middle_bottom_echarts_right">
                        <img src="/images/main_bootm_middle.png">
                        <div class="main_top_echarts_con">
                            <div class="main_top_echarts_con_title">用户数据统计</div>
                            <div class="right-center">
                                <div class="title"></div>
                                <div class="echart wenzi">
                                    <div class="gun">
                                        <span>账号名</span>
                                        <span>账单完成个数</span>
                                        <span>账单提交数</span>
                                        <span>收益总数</span>
                                    </div>
                                    <div class="myscroll">
                                        <ul>
                                            <li :key="index" v-for="(item, index) in userData">
                                                <div class="fontInner clearfix">
                                                    <span>{{ item.accountName }}</span> <!-- 账号名 -->
                                                    <span>{{ item.completedBills }}</span> <!-- 账单完成个数 -->
                                                    <span>{{ item.soldCars }}</span> <!-- 车辆售出数 -->
                                                    <span>{{ item.totalEarnings }}</span> <!-- 收益总数 -->
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main_top_left main_top_right">
                <div class="main_top_left_top main_top_left_bottom">
                    <img src="/images/main_top_left.png"/>
                    <div class="main_top_left_top_title">各个仓库库存占比</div>
                    <div class="main_top_left_top_con" id="questionId"></div>
                </div>
            </div>
        </div>
        <div class="main_middle">
            <div class="main_middle_list">
                <img src="/images/main_middle.png">
                <div class="main_list_title main_list_title1">销售总量</div>
                <span class="main_list_title_num main_list_title_num1">{{ totalCars }}</span>
            </div>
            <div class="main_middle_list">
                <img src="/images/main_middle.png">
                <div class="main_list_title main_list_title2">销售总额</div>
                <span class="main_list_title_num main_list_title_num2">{{ totalPrice }}</span>
            </div>
            <div class="main_middle_list">
                <img src="/images/main_middle.png">
                <div class="main_list_title main_list_title3">仓库库存</div>
                <span class="main_list_title_num main_list_title_num3">{{ storageInventory }}</span>
            </div>
            <div class="main_middle_list">
                <img src="/images/main_middle.png">
                <div class="main_list_title main_list_title4">员工数量</div>
                <span class="main_list_title_num main_list_title_num4">{{ employeeCount }}</span>
            </div>
            <div class="main_middle_list">
                <img src="/images/main_middle.png">
                <div class="main_list_title main_list_title5">仓库数量</div>
                <span class="main_list_title_num main_list_title_num5">{{ storageCount }}</span>
            </div>
        </div>
        <div class="main_bottom">
            <div class="main_bottom_top">
                <div class="main_bottom_top_list">
                    <img src="/images/main_bottopm_top1.png">
                    <div class="main_bottom_t_l_title">库存车辆</div>
                    <div class="main_bottom_t_l_con">
                        <div class="main_bottom_t_l_main">
                            <ul><!-- 动态内容将在此处插入 --></ul>
                        </div>
                    </div>
                </div>
                <div class="main_bottom_top_list">
                    <img src="/images/main_bottopm_top1.png">
                    <div class="main_bottom_t_l_title">售出车辆</div>
                    <div class="main_bottom_t_l_con">
                        <div class="main_bottom_t_l_main2">
                            <ul>
                                <li>
                                    <div class="main_bottom_t_l_main_list">
                                        <div class="main_bottom_t_list_title main_bottom_polity_title1"></div>
                                    </div>
                                </li>
                                <li>
                                    <div class="main_bottom_t_l_main_list">
                                        <div class="main_bottom_t_list_title main_bottom_polity_title2"></div>
                                    </div>
                                </li>
                                <li>
                                    <div class="main_bottom_t_l_main_list">
                                        <div class="main_bottom_t_list_title main_bottom_polity_title3"></div>
                                    </div>
                                </li>
                                <li>
                                    <div class="main_bottom_t_l_main_list">
                                        <div class="main_bottom_t_list_title main_bottom_polity_title4"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main_bottom_bottom">
                <div class="main_bottom_b_left">
                    <img src="/images/main_bottom_bottom.png">
                    <div class="main_bottom_b_title">车辆颜色占比</div>
                    <div class="main_bottom_b_con" id="coverageId"></div>
                </div>
                <div class="main_bottom_b_middle1">
                    <img src="/images/main_bootm_middle.png">
                    <div class="main_bottom_b_title">月度销售趋势</div>
                    <div class="main_bottom_b_con main_bottom_b_con2" id="contentId"></div>
                </div>
                <div class="main_bottom_b_middle2">
                    <img src="/images/main_bootm_middle.png">
                    <div class="main_bottom_b_title">各品牌销售占比</div>
                    <div class="main_bottom_b_con main_bottom_b_con2" id="publicNumId"></div>
                </div>

                <div class="main_bottom_b_right">
                    <img src="/images/main_bottom_bottom.png">
                    <div class="main_bottom_b_title">车辆价格区间分布</div>
                    <div class="main_bottom_b_con" id="yearsNumId"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/fontscroll.js"></script>
<script src="/jsjs/jsjs/dataScoll.js" type="text/javascript"></script>
<script src="/jsjs/jsjs/digitalScroll.js" type="text/javascript"></script>
<script src="/jsjs/jsjs/jcarousellite.js" type="text/javascript"></script>
<script src="/jsjs/jsjs/particles.min.js" type="text/javascript"></script>
<script src="/jsjs/jsjs/app.js" type="text/javascript"></script>
<script src="jsjs/jsjs/index.js"></script>


<script>
    new Vue({
        el: ".main",
        data: {
            rankings: [], // 销量排行数据
            totalCars: 0,
            totalPrice: 0,
            employeeCount: 0, // 员工数量
            storageCount: 0, // 仓库数量
            storageInventory: 0, // 仓库库存
            storageData: [], // 仓库数据
            userData: [] // 用户数据
        },
        methods: {
            // 获取销量排行数据
            fetchBrandSalesData() {
                axios.get('http://127.0.0.1:8080/countall') // 获取销量排行数据
                    .then(response => {
                        this.rankings = response.data.slice(0, 10);
                    })
                    .catch(error => {
                        console.error('销量排行数据请求失败:', error);
                    });
            },
            // 获取用户数据
            fetchUserData() {
                axios.get('http://127.0.0.1:8080/countUserprice')
                    .then(response => {
                        this.userData = response.data.map(item => ({
                            id: item.uid,
                            accountName: item.creator,
                            completedBills: item.creator_count_status_1,
                            soldCars: item.total_creator_count,
                            totalEarnings: item.total_value_status_1
                        }));
                    })
                    .catch(error => {
                        console.error('用户数据请求失败:', error);
                        // 使用模拟数据
                        this.userData = [
                            {
                                id: 1,
                                accountName: 'cax',
                                completedBills: 99,
                                soldCars: 99,
                                totalEarnings: 49780002
                            }
                        ];
                    });
            },
            // 获取销售总量和销售总额数据
            fetchSalesData() {
                axios.get('http://127.0.0.1:8080/allcar') // 获取销售总量数据
                    .then(response => {
                        this.totalCars = response.data;
                    })
                    .catch(error => {
                        console.error('销售总量数据请求失败:', error);
                    });

                axios.get('http://127.0.0.1:8080/allprice') // 获取销售总额数据
                    .then(response => {
                        this.totalPrice = response.data;
                    })
                    .catch(error => {
                        console.error('销售总额数据请求失败:', error);
                    });
            },
            // 获取员工数量
            fetchEmployeeCount() {
                axios.get('http://127.0.0.1:8080/allUser') // 获取员工数量
                    .then(response => {
                        this.employeeCount = response.data;
                    })
                    .catch(error => {
                        console.error('员工数量数据请求失败:', error);
                    });
            },
            // 获取仓库数量
            fetchStorageCount() {
                axios.get('http://127.0.0.1:8080/allStorage') // 获取仓库数量
                    .then(response => {
                        this.storageCount = response.data;
                    })
                    .catch(error => {
                        console.error('仓库数量数据请求失败:', error);
                    });
            },
            // 获取仓库库存
            fetchStorageInventory() {
                axios.get('http://127.0.0.1:8080/alluCar') // 获取仓库库存
                    .then(response => {
                        this.storageInventory = response.data;
                    })
                    .catch(error => {
                        console.error('仓库库存数据请求失败:', error);
                    });
            },
            // 获取仓库数据并生成玫瑰图
            fetchStorageData() {
                axios.get('http://127.0.0.1:8080/allStorageCount') // 获取仓库数据
                    .then(response => {
                        this.storageData = response.data;
                        this.initStorageChart(); // 初始化仓库玫瑰图
                    })
                    .catch(error => {
                        console.error('仓库数据请求失败:', error);
                    });
            },
            // 初始化仓库玫瑰图
            initStorageChart() {
                const questionDom = document.getElementById('questionId');
                if (!questionDom) {
                    console.error('DOM 元素不存在: questionId');
                    return;
                }

                // 销毁之前的实例
                if (window.storageChart) {
                    window.storageChart.dispose();
                }
                window.storageChart = echarts.init(questionDom);

                // 确保 count 是数字
                const data = this.storageData.map(item => ({
                    name: item.total_quantity,
                    value: Number(item.count)
                }));

                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        show: false
                    },
                    series: [
                        {
                            name: '仓库数量',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 4,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: true,
                                formatter: '{b}: {c}',
                                position: 'inside',
                                color: '#fff',
                                fontSize: 12
                            },
                            data: data
                        }
                    ]
                };

                window.storageChart.setOption(option);
                window.addEventListener('resize', () => {
                    window.storageChart.resize();
                });
            }
        },
        created() {
            // 页面加载时获取用户数据
            this.fetchUserData();
            // 页面加载时获取销量排行数据
            this.fetchBrandSalesData();
            // 页面加载时获取销售总量和销售总额数据
            this.fetchSalesData();
            // 页面加载时获取员工数量和仓库数量
            this.fetchEmployeeCount();
            this.fetchStorageCount();
            this.fetchStorageInventory(); // 获取仓库库存
            this.fetchStorageData(); // 获取仓库数据并生成玫瑰图
            // 定时刷新用户数据
            setInterval(this.fetchUserData, 1000);
            // 定时刷新销售总量和销售总额数据
            setInterval(this.fetchSalesData, 1000);
            // 定时刷新销量排行数据
            setInterval(this.fetchBrandSalesData, 1000);
            // 定时刷新员工数量和仓库数量数据
            setInterval(this.fetchEmployeeCount, 1000);
            setInterval(this.fetchStorageCount, 1000);
            setInterval(this.fetchStorageInventory, 1000); // 定时刷新仓库库存
            setInterval(this.fetchStorageData, 900000); // 定时刷新仓库数据
        }
    });
    // 文本滚动初始化
    $(function () {
        $('.myscroll').myScroll({
            speed: 1, // 数值越大，滚动速度越慢
            rowHeight: 38 // 每行高度
        });
    });
</script>